<template>
  <div id="main">
    <p>
      这是一段测试的内容，测试
      <span class="redbox">红色盒子</span>
      是否生效。
    </p>
    <p class="parent-test">测试父选择器 &，这是<a href="#">测试的链接</a>。</p>
    <div class="nested-prop-test"></div>
    <div class="import-test"></div>
  </div>
  <div>
    <p>
      这是一段错误信息的提示:
      <span class="error-info">网络端口</span>，请联系管理员。
      <span class="danger-msg">这是一段危险的文字</span>。
      <span>请查看效果</span>
    </p>
  </div>
  <div>
    <button class="button-report">button basic</button>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
/* chrome 浏览器已经支持 css 嵌套功能 */
@import "./foo.scss";
$error-color: red;
$primary-color: #0bf;
#main {
  p:first-of-type {
    color: #0f0;
    width: 97%;
    .redbox {
      background-color: $error-color;
      color: #000;
    }
  }
  p.parent-test {
    a {
      font-weight: bold;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
        color: $primary-color;
      }
    }
  }
}
.nested-prop-test {
  width: 300px;
  height: 200px;
  border: {
    left: 3px solid red;
    top: 5px dotted orange;
    right: 8px dashed green;
    bottom: {
      style: double;
      width: 8px;
      color: blue;
    }
  }
}

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

// 向混入传递变量
@mixin danger($color) {
  @include important-text;
  // 覆盖 important-text 中的 color 配置
  color: $color;
}

.error-info {
  color: gray;
  @include important-text;
  border-color: pink;
}

.danger-msg {
  // 向 mixin 中传递参数
  @include danger(orange);
}

.button-basic {
  // border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-report {
  @extend .button-basic;
  background-color: #eee;
  border-color: green;
  &:hover {
    background-color: #ddd;
    border-color: red;
  }
}
</style>
